<template>
  <div>
    <van-nav-bar
      fixed
      z-index="1000"
      border
      left-arrow
      @click-left="$router.back()"
      placeholder
      title="电影介绍"
    />
    <div class="intro-content">
      <div class="intro">
        <div
          class="intro-bg"
          :style="{ backgroundImage: 'url(' + intro.img + ')' }"
        ></div>
        <div class="intro-img">
          <img :src="intro.img" alt="" />
        </div>
        <div class="intro-info">
          <div class="title">
            {{ intro.name }}
          </div>
          <p>{{ intro.duration }}</p>
          <p>{{ intro.type }}</p>
        </div>
        <div class="intro-info2">
          <div class="inner">
            <div class="score">
              <van-rate
                v-model="intro.score"
                readonly
                allow-half
                void-icon="star"
                void-color="#eee"
              />
            </div>
            <div class="formats">
              <div
                class="label"
                v-for="(item2, index) in intro.formats"
                :key="index"
              >
                {{ item2 | formats(0) }} <span>{{ item2 | formats(1) }}</span>
              </div>
            </div>
            <div>{{ intro.startTime }}</div>
          </div>
        </div>
      </div>

    <div class="movie_imgList">
      <van-sidebar class="header">
        <van-sidebar-item title="影视剧请照片" />
        <span @click="showStageImgs(0)">
          <!--  不是非常严谨    -->
          <em>{{intro.stageImgs?intro.stageImgs.length:''}}</em>
          <van-icon name="arrow" />
        </span>
      </van-sidebar>
      <div class="imgListWrap">
   <div class="imgList" >
        <img @click="showStageImgs(index)" v-for="(img,index) in intro.stageImgs" :key="index" :src="img" alt />
      </div>
      </div>
   
    </div>

    <!--    -->

        <div class="movie_imgList introduce">
      <van-sidebar class="header">
        <van-sidebar-item title="影视剧请照片" />
      </van-sidebar>
      <div class="director">
        <em>导演:</em>
        <span>{{intro.director}}</span>
      </div>
      <div class="Starring">
        <em>主演:</em>
        <span>{{intro.star}}</span>
      </div>
      <div class="Drama">
        <em>剧情:</em>
        <span class="t-2em">{{intro.stage}}</span>
      </div>
    </div>
    <!--   -->

        <div class="btm_paa" @click="$router.push(`/filmsOrder?filmsId=${$route.query.filmsId}`)">
      <van-button class="btn" type="primary" color="#DA281C" block>购票</van-button>
    </div>

    </div>
  </div>
</template>

<script>
import { Rate } from "vant";
import { Sidebar, SidebarItem,ImagePreview  } from 'vant';


export default {
  name: "intro",
  data() {
    return {
      intro: {},
    };
  },
  components: {
    [Rate.name]: Rate,
    [Sidebar.name]:Sidebar,
    [SidebarItem.name]:SidebarItem,
    [ImagePreview.Component.name]:ImagePreview.Component 
  },
  filters: {
    formats(val, index) {
      // console.log(val)
      return val.split("-")[index];
    },
  },
  created() {
    this.$http
      .post("/films/pub/getDetail", {
        filmsId: this.$route.query.filmsId,
      })
      .then((res) => {
        console.log(res);
        this.intro = res.rows[0];
        this.intro.score = this.intro.score / 2; ///  处理一下 
      });
  },
  methods:{
    showStageImgs(startPosition){

      let {stageImgs} = this.intro;
      if(!stageImgs||stageImgs.length===0){
        return 
      }

      ImagePreview({
          images:stageImgs,
          closeable: true,
           startPosition
        });
      
    }
  }
};
</script>

<style lang="less">
.intro-content{
  padding-bottom: 60px;
}
.intro {
  height: 166px;
  position: relative;
  padding-top: 16px;
  overflow: hidden;

  &-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    background-position: center 10%;
    background-repeat: no-repeat;

    backdrop-filter: blur(20px);
    -webkit-filter: blur(31px);
    filter: blur(31px);
  }
  &-img {
    width: 110px;
    height: 150px;
    margin: 0 15px;
    float: left;
    position: relative;
    z-index: 11;
    img {
      width: 110px;
      height: 150px;
    }
  }
  &-info {
    width: 230px;
    overflow: hidden;
    position: relative;
    z-index: 9;
    color: #fff;
    p {
      font-size: 12px;
    }
  }
  &-info2 {
    height: 80px;
    width: 100%;
    background: #fff;
    border-radius: 12px 12px 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 8;

    .inner {
      margin-left: 140px;
    }
  }
}
.formats {
  overflow: hidden;
  .label {
    display: block;
    background: rgba(147, 145, 170, 1);
    border-radius: 2px;
    padding: 2px;
    float: left;
    color: #fff;
    font-size: 10px;
    transform: scale(0.85);
    span {
      color: rgba(147, 145, 170, 1);
      background: #fff;
      padding: 0 1px;
      border-radius: 2px;
    }
  }
}

.nav {
  position: relative;
  height: 300px;
  .shuxianOne {
    position: absolute;
    top: 14px;
    left: 0;
  }
  .img {
    float: left;
    img {
      width: 100px;
    }
  }
  .shuxianTwo {
    position: absolute;
    bottom: -98px;
    left: 0;
  }
}


 .movie_imgList {
    padding: 0 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    .header {
      width: 100%;
      height: 60px;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .van-sidebar {
        width: 200px;
        .van-sidebar-item {
          overflow: hidden;
        }
      }
      span {
        color: #bbb;

        em {
          margin-right: 10px;
          font-style: normal;
        }
      }
    }
    .imgListWrap{
      width: 100%;
      overflow: hidden;
    }
    .imgList {
     
      height: 100px;
         display: block;
         white-space: nowrap;
         overflow-x: scroll;
      font-size: 0;
      img {
        display: inline-block;
       
        margin-right:12px;
        width: auto;
        height: 100px;
      }
    }
  }
  .introduce {
    border: none;
    font-size: 18px;
    padding: 0 20px;

    div {
      display: flex;
      margin-bottom: 10px;
      em {
        font-style: normal;
        // width: 80px !important;
        margin-right: 20px;
        white-space: pre;
      }
      span {
        // margin-left: 20px;
        color: #bbb;
      }
    }
  }
  div.btm_paa {
    .btn {
      position: fixed;
      bottom: 0;
      z-index: 33;
    }
  }

</style>